﻿@using MvcApplication2.Ultilities

@{
    var roles = Constant.ADGroup;
}

<div class="row show-grid">
    <div class="row">
        <div class="col-xs-6 col-sm-3">
            .col-xs-6 .col-sm-3<br />
            Resize your viewport or check it out on your phone for an example.
        </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
</div>

<br />
Responsive for each screen sizes and clear fix
<div class="row show-grid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            .col-xs-6 .col-sm-4<br />
            Long text area
        </div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>
</div>

<br />
Responsive column resets
<div class="row show-grid">
    <div class="row">
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>
</div>

<br />
Nested grids
<div class="row show-grid">
    <div class="row">
        <div class="col-sm-9">
            Level 1: .col-sm-9
        <div class="row">
            <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
        </div>
    </div>
</div>

<br />
Column ordering
<div class="row show-grid">
    <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>
</div>


<h4>WebViewPage - @Admin()</h4>
<h4>User Roles - @User.IsInRole(roles)</h4>

<h1>Javascript</h1>
<a href="#">More detail</a>

@Html.Partial("FormContainer")

@Scripts.Render("~/bundles/home")

<script type="text/javascript">
    $(document).ready(function () {
        Sample.init();
    });
</script>
